<template>
  <view class="page_content">
    <view class="phone_search">
      <view class="input_box">
        <AtSearchBar
          :value="phone"
          :onChange="handleChange"
          :onActionClick="onActionClick"
        />
      </view>
      <!-- <view class="search_button"><AtButton type='primary'>搜 索</AtButton></view> -->
    </view>
    <view class="stat_line">共{{total}}位会员</view>
    <scroll-view scrollY="true"
      class="scroll_box"
      v-if="listData.length"
      @scrolltolower="lower">
      <view class="user_item" v-for="(item,index) in listData" :key="index" @tap="gotoDetail(item.id,item.uid)">
        <image class="item_img" :src="item.headimgurl"></image>
        <view class="item_right">
          <view>{{item.real_name}}</view>
          <view>{{item.mobile}} </view>
          <view>
            账户余额：<text class="color_orange">{{item.balance}}</text>，
            账户积分：<text class="color_orange">{{item.point}}</text>
          </view>
          <view class="item_card">{{item.card_level}}</view>
        </view>
      </view>
      <AtLoadMore style="height:30px;margin-top:-10px" noMoreText="没有更多了" :status="loadingStatus"/>
    </scroll-view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'
import './list.module.scss'
import UserAPI from '../../../api/user'
export default {
  name: 'userList',
  data(){
    return{
      listData: [],
      phone: "",
      total: 0,
      page: 1,
      loadingStatus: "more",
      showLoading: false, // 上滑加载更多
    }
  },
  mounted(){
    this.init();
  },
  methods:{
    init(){
      this.getListData()
    },
    async getListData(){
      var data = {
        app_id: Taro.getStorageSync('app_id'),
        page: this.page
      }
      if(this.phone != ""){
        data.mobile = this.phone
      }
      const res = await UserAPI.getUserList(data);
      if(res.code == 200){
        this.total = res.data.total_num;
        if(res.data.result){
          res.data.result.forEach(item => {
            this.listData.push(item)
          })
        }
        this.showLoading = false;
        this.page ++;
        if(this.total == this.listData.length){
          this.loadingStatus = 'noMore';
        }else{
          // if(this.firstIn){
          //   this.page = 2;
          //   this.getListData();
          // }
        }
        
      }
    },
    handleChange(val){
      this.phone = val;
    },
    lower(e) { // 到底加载更多
      console.log(e)
      if(!this.showLoading){
        if(this.total != this.listData.length){
          this.showLoading = true;
          this.loadingStatus = 'loading'
          this.getListData();
        }
      }
    },
    onActionClick(){
      this.listData = [];
      this.page = 1;
      this.getListData();
    },
    gotoDetail(id,uid){
      Taro.setStorageSync('detail_id',id);
      Taro.setStorageSync('detail_uid',uid);
      var pageUrl = "/pages/menuList/userDetail/userDetail?uid="+id
      Taro.navigateTo({
        url:pageUrl
      })
    }
  },
}
</script>